<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- DOM
    在 Web 开发中DOM 通常与 JavaScript 一起使用。
    当网页被加载时浏览器会创建页面的文档对象模型，也就是DOM(Document Object Model)
    每个 HTML或 XML, 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。
    文档节点是整个文档树的根节点。
    DOM 为这个文档树提供了一个编程接口，开发者可以使用JavaScript 来操作这个树状结构。 -->
    <div id="box1">
        这是一个id选择器
    </div>
    <div class="box2">
        这是一个class选择器
    </div>
    <div>
        这是一个普通div标签
    </div>
  
    <button>按钮</button>

    <script>
        var box1 = document.getElementById("box1")

        console.log(box1)

        var box2 = document.getElementsByClassName("box2")[0]

        console.log(box2)

        var box3 = document.getElementsByTagName("div")[2]
        console.log(box3)

        // box1.innerHTML("修改了id选择器") 
       // box1.innerHTML = "修改了id选择器";
       // box2[0].innerText = "修改了class选择器";

        box1.innerHTML = "  <a href='https://www.baidu.com'>百度</a>";
        box2.innerText = "  <a href='https://www.baidu.com'>百度</a>";

        box3.style.color = 'red';
        box3.style.fontSize = '20px';

        // DON 事件
        var btn = document.getElementsByTagName("button")[0]

        btn.onclick = function(){
            alert("按钮被点击了 onclick")
        }

        document.addEventListener("click",function(){
            alert("按钮被点击了addEventListener")
        } )
        
        // function(){
        //     alert("按钮被点击了addEventListener")
        // }

        function  myfunction(){
             alert("按钮被点击了myfunction")
         }
        document.addEventListener("click", myfunction )

        // appendchild() 把新的子节点添加到指定节点。
        // removeChild()  删除子节点。
        // replacechild() 替换子节点。
        // insertBefore() 在指定的子节点前面插入新的子节点。
        //  等等还有很多 讲讲vue的时候再讲



    </script>


</body>

</html>